<template>
  <div class="init_main">
    <p class="name_sty">{{ name }}</p>
    <div class="query">
      模板名称：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="全部" value="全部"> </el-option>
      </el-select>
      任务名称：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="全部" value="全部"> </el-option>
      </el-select>
      <el-button
        plain
        size="mini"
        icon="el-icon-search"
        style="margin-left: 10px"
        >查询</el-button
      >
      <!-- <el-button
        plain
        size="mini"
        icon="el-icon-plus"
        type="primary"
        @click="open_dialog('新增')"
        >新增</el-button
      >
      <el-button
        plain
        size="mini"
        icon="el-icon-edit"
        type="warning"
        @click="open_dialog('修改')"
        >修改</el-button
      >
      <el-button plain size="mini" icon="el-icon-delete" type="danger"
        >删除</el-button
      > -->
    </div>
    <p class="title">回访门诊病人满意度调查结果排序</p>
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        highlight-current-row
        @current-change="row_click"
      >
        <el-table-column
          align="center"
          prop="调查内容"
          label="调查内容"
          width="380"
        >
        </el-table-column>
        <el-table-column align="center" prop="胃肠镜室" label="胃肠镜室">
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="供应室" label="供应室">
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="内二科病区" label="内二科病区">
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="急诊科病区" label="急诊科病区">
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="老年病科" label="老年病科">
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="外妇科病区" label="外妇科病区">
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="针灸推拿科病区"
          label="针灸推拿科病区"
        >
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="骨伤科病区" label="骨伤科病区">
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="脾胃病科病区"
          label="脾胃病科病区"
        >
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="手术室" label="手术室">
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="护理部" label="护理部">
          <el-table-column align="center" prop="得分" label="得分">
          </el-table-column>
          <el-table-column align="center" prop="排序" label="排序">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange_page"
        :current-page="query.CurrentPage"
        :page-sizes="[10, 15, 50, 100]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
      >
      </el-pagination>
    </div>
    <!-- 弹层 -->
    <el-dialog
      :title="dialog_title"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <table border="1" style="width: 100%">
        <tr>
          <td class="tac">任务名称：</td>
          <td><el-input size="mini" v-model="form.任务名称"></el-input></td>
          <td class="tac">模板：</td>
          <td>
            <el-select
              v-model="form.模板"
              multiple
              placeholder=""
              size="mini"
              style="width: 100%"
            >
              <el-option label="test" value="test"> </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td class="tac">调查者：</td>
          <td>
            <el-select
              v-model="form.调查者"
              multiple
              placeholder=""
              size="mini"
              style="width: 100%"
            >
              <el-option label="test" value="test"> </el-option>
            </el-select>
          </td>
          <td class="tac">门阀值：</td>
          <td>
            <el-input size="mini" v-model="form.门阀值"></el-input>
          </td>
        </tr>
        <tr>
          <td class="tac">入院日期：</td>
          <td>
            <el-date-picker
              v-model="form.入院日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              size="small"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </td>
          <td class="tac">门诊日期：</td>
          <td>
            <el-date-picker
              v-model="form.门诊日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              size="small"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </td>
        </tr>
        <tr>
          <td class="tac">是否选择科室：</td>
          <td>
            <el-select
              v-model="form.是否选择科室"
              multiple
              placeholder=""
              size="mini"
              style="width: 100%"
            >
              <el-option label="test" value="test"> </el-option>
            </el-select>
          </td>
          <td class="tac">科室：</td>
          <td>
            <el-select
              v-model="form.科室"
              multiple
              placeholder=""
              size="mini"
              style="width: 100%"
            >
              <el-option label="test" value="test"> </el-option>
            </el-select>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="mini">关 闭</el-button>
        <el-button type="primary" @click="btn_ok" size="mini">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      query: {
        CurrentPage: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [{ 模板名称: "123" }, { 模板名称: "123" }],
      dialogVisible: false,
      dialog_title: "",
      row_info: null,
      form: {},
    };
  },
  mounted() {
    this.name = this.$route.meta.title;
  },
  methods: {
    open_windo(url) {
      window.open(url);
    },
    row_click(row) {
      if (!row) {
        this.row_info = null;
        return;
      }
      this.row_info = row;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    btn_ok() {
      this.handleClose();
    },
    open_dialog(val) {
      this.dialog_title = val + "模板组";
      if (val == "新增") {
        this.dialogVisible = true;
        return;
      }
      if (val == "修改" && this.row_info) {
        this.form = this.row_info;
        this.dialogVisible = true;
      } else {
        this.$notify.error({
          title: "错误",
          message: "请选择一条数据后操作！",
        });
        return;
      }
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.CurrentPage = 1;
    },
    handleCurrentChange_page(val) {
      this.query.CurrentPage = val;
      this.getList();
    },
    to_Ti(row) {
      this.$router.push("/Ti_myd");
    },
  },
};
</script>

<style scoped lang='scss'>
.init_main {
  background-color: #fff;
  height: calc(100vh - 60px);
  border: 1px solid #333;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  font-family: "FangSong";
  color: #000;
  .name_sty {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    font-family: "FangSong";
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
  }
  .table {
    margin-top: 15px;
  }
  .page {
    text-align: right;
  }
  .title {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
  }
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: rgb(208, 229, 250);
  color: rgb(65, 158, 255);
  font-weight: 700;
}
.tac {
  text-align: center;
}
</style>